var App = (function () {
  function Vue(options) {
    this.$data = options.data()
    this.$el = document.querySelector(options.el)

    var _template = options.template
    var _methods = options.methods

    this._init_(this, _methods, _template)
  }

  // {
  //   eventLoop: '@',  { eventName, dom, methods} 绑定
  //   propertyLoop: ':'  { propertyName, dom, $dataName} $dataName -update-> dom
  // }

  Vue.prototype = {
    _init_: function (vm, methods, template) {

      var loop = {
        eventLoop: [],
        propertyLoop: [],
        domShowLoop: []
      }

      var container = document.createElement('div')
      container.innerHTML = template

      initData(vm)
      initLoop(container, loop)
      bindEvent(vm, methods, template)
      render(vm, container)
    },
  }

  function initData(vm) {
    var _data = vm.$data
    for (var keyName in _data) {
      ;(function (key) {
        Object.defineProperty(vm, key, {
          get() {
            return _data[key]
          },
          set(newValue) {
            _data[key] = newValue
            this.updateView(key)
          },
        })
      })(keyName)
    }
  }

  function initLoop(container, loop) {
    var domList = container.querySelector('*')
    console.log(domList)
  }

  function bindEvent (vm, methods, template) {
    for(var methodName in methods) {
      vm[methodName] = methods[methodName]
    }
  }

  function render(vm, container) {
    vm.$el.appendChild(container)
  }

  function updateView() {

  }

  return Vue
})()

export default App
